<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .title {
      margin-top: 20px;
      text-align: center;
    }

    .namebox {
      margin: 40px 0 0;
    }

    .box-item {
      height: 60px;
      line-height: 60px;
      font-size: 18px;
      text-align: center;
      background-color: #eee;
      color: rgb(124, 81, 81);
      margin-bottom: 30px;
      border-radius: 4px;
    }

    .box-item.active {
      background-color: orange;
    }
  </style>

<body>
  <div class="container">
    <h1 class="title">xxx点名系统</h1>
    <div class="row namebox" id="namebox">
      <!-- <div class="col-xl-2 col-lg-3 col-md-4 col-sm-6">
        <div class="box-item">1</div>
      </div> -->
    </div>
    <div class="btns text-center">
      <button class="btn btn-primary btnclick" id="btnclick">点击抽取</button>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
    <script>
      // 输入n，输出n天后的时间
      var n = +prompt('请输入一个天数：');
      var date = new Date();
      var datetime = date.getTime();
      function afterDate(time, n) {
        var aftertime = datetime + (n * 60 * 60 * 24 * 1000);
        var dat = new Date(aftertime);
        var year = dat.getFullYear();
        var month = dat.getMonth() + 1;
        var sdate = dat.getDate();
        var hour = dat.getHours();
        var minute = dat.getMinutes();
        var second = dat.getMinutes();
        var result = year + '-' + month + '-' + sdate + ' ' + hour + ':' + minute + ':' + second;
        return result;
      }
      console.log('第' + n + '天后的时间为：' + afterDate(datetime, n));

      // 获取两个日期之间相差的天数
      function getDateBetween(strDate, endDate) {
        var sDate = new Date(strDate);
        var eDate = new Date(endDate);
        if (sDate > eDate) {
          return 0;
        } else if (sDate === eDate) {
          return 1;
        }
        var days = (eDate - sDate) / 1000 / 60 / 60 / 24;
        return days;
      }
      console.log(getDateBetween('2022-03-04', '2022-04-13'));
      // - 使用Math对象随机数实现点名功能
      var _namebox = document.getElementById('namebox');
      var _btnclick = document.getElementById('btnclick');
      var _names = ['赵丝', '钱饭', '孙建军', '李设计', '周铁', '吴登科', '郑登录', '王欧霞', '刘简单'];
      var _names_str = '';
      for (let v of _names) {
        _names_str += '<div class="col-xl-4 col-lg-4 col-md-4 col-sm-6"><div class="box-item">' + v + '</div></div>';
      }
      _namebox.innerHTML = _names_str;
      _btnclick.onclick = function () {
        for (let i in _names) {
          _namebox.children[i].children[0].setAttribute('class', 'box-item');
        }
        var _index = Math.floor(_names.length * Math.random());
        _namebox.children[_index].children[0].setAttribute('class', 'box-item active');
      }
      // 使用String对象实现，对任意字符串敏感字符替换功能
      var arr1 = '今天的天气不太好，很多人不喜欢下雨天。';
      var arr01 = ['天气', '下雨'];
      for (let v of arr01) {
        arr1 = arr1.replaceAll(v, '***');
      }
      console.log(arr1);
      // 有两个数组，一个数组arr是班级里所有的学员的名称，一个数组currentArr是提交了每日反馈的学员名单，请创建一种算法，把未提交每日反馈的学员筛选出来
      var arr = ['赵丝', '钱饭', '孙建军', '李设计', '周铁', '吴登科', '郑登录'];
      var currentArr = ['赵丝', '钱饭', '孙建军', '李设计', '王欧霞', '刘简单'];
      var nocurrentArr = [];
      for (let i of arr) {
        var flag = false;
        for (let v of currentArr) {
          if (i == v) {
            flag = true;
            break;
          }
        }
        if (flag == false) {
          nocurrentArr += i + ' ';
        }
      }
      console.log('未提交每日反馈的学员: ' + nocurrentArr);


    </script>
</body>

</html>